<template>
  <div class="receiveInfo">
    <div v-if="loading" class="loading"><van-loading class="load-icon" size="20px" type="spinner" /><span>拼命加载中...</span></div>
    <div class="order">
      <div class="title">
        <div class="icon">
          <img src="../../../../assets/images/icon/icon_order.png" alt="">
        </div>
        <span class="title-sn">订单号：{{ orderDetail.order_sn ? orderDetail.order_sn : order_sn }}</span>
      </div>
    </div>
    <div v-for="(item, index) in shipedList" :key="index">
      <div class="receive-list">
        <div class="title">
          <span v-if="item.ship_status == 0">待发货商品清单</span>
          <span v-if="item.ship_status == 1 && item.sign_status == 0">待收货商品清单</span>
          <span v-if="item.ship_status == 1 && item.sign_status == 1">收货记录</span>

          <div v-if="item.status == 2" class="txt font-colorGrey fr" >已作废</div>
          <div v-if="item.ship_status == 0 && item.status !== 2" class="txt font-colorRed fr" >待发货</div>
          <div v-if="item.ship_status == 1 && item.sign_status == 0" class="btn org-bg fr" @click="clickToConfirm(item)">确认收货</div>
          <div v-if="item.ship_status == 1 && item.sign_status == 1" class="txt font-colorGreen fr" >已签收</div>
        </div>
        <!--出库信息-->
        <div v-if="item.ship_status == 0" class="receive-list-con">
          <div class="item">出库编号：{{ item.store_doc_sn }}</div>
          <div class="item">出库日期：{{ item.import_time }}</div>
        </div>
        <!--发货信息-->
        <div v-if="item.ship_status == 1" class="receive-list-con">
          <div class="item">物流公司：{{ item.logistics_company_name }}</div>
          <div class="item">物流单号：{{ item.logistics_sn }}</div>
          <div class="item">物流备注信息：{{ item.ship_remark }}</div>
          <!--<div class="item">发货数量：<span class="font-colorOrange">2件</span></div>-->
          <div class="item">发货时间：{{ item.ship_time }}</div>
          <div class="item">物流详情：
            <el-button v-if="!item.clickToShowInfo" type="text" @click="getPluginlogisticsTrackingInfo(index)">点击查看详情</el-button>
            <el-button v-else type="text" @click="clickToCloseTrackingInfo(index)">关闭详情</el-button>
          </div>
          <div class="express-con">
            <div v-for="(its,num) in item.logisticsTrackingInfo" :key="num" class="logisticsTrackingList">
              <span>{{ its.time }}</span>
              <span>{{ its.status }}</span>
            </div>
          </div>
        </div>

        <div class="receive-list-goods">
          <tpl-goods-slide :item-list="item.order_item_list"/>
        </div>
      </div>
    </div>
    <div v-if="shipedList.length == 0 && !loading">
      <div class="noData small">
        <div class="content">
          <img src="../../../../assets/images/noData/noDataReceive.png" alt="">
          <div class="text">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetDodownentryList, PutConfirmOrder, getOrderExpressInfo } from '@/api/order'
import tplGoodsSlide from '../../components/tplGoodsSlide'
export default {
  name: 'Index',
  components: {
    tplGoodsSlide
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      order_sn: '',
      loading: false,
      shipedList: [],
      logisticsTrackingInfo: [] // 物流详情
    }
  },
  created() {
    // this.getShipingItemFn()
  },
  methods: {
    clickToCloseTrackingInfo(index) {
      this.$set(this.shipedList[index], 'logisticsTrackingInfo', [])
      this.$set(this.shipedList[index], 'clickToShowInfo', false)
    },
    // 获取物流详情
    getPluginlogisticsTrackingInfo(index) {
      const data = {
        store_doc_id: this.shipedList[index].store_doc_id
      }
      getOrderExpressInfo(data).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          if (data.data.result && data.data.result.list && data.data.result.list.length !== 0) {
            this.$set(this.shipedList[index], 'logisticsTrackingInfo', data.data.result.list)
          } else {
            const defaultData = [
              {
                'time': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
                'status': '你的快递还没有信息'
              }
            ]
            this.$set(this.shipedList[index], 'logisticsTrackingInfo', defaultData)
          }
          this.$set(this.shipedList[index], 'clickToShowInfo', true)
        }
      })
    },
    // 获取订单的获取订单的出库单列表
    getShipingItemFn() {
      this.loading = true
      GetDodownentryList(this.$route.query.id).then(res => {
        this.loading = false
        const data = res.data
        if (data.status_code === 200) {
          this.shipedList = data.data
        } else {
          this.shipedList = []
        }
      })
    },
    // 确认收货
    clickToConfirm(item) {
      PutConfirmOrder(item).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.getShipingItemFn()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .receiveInfo{
    margin-top: pxCalc(5px);
    .order{
      padding-left: pxCalc(20px);
      background: #fff;
      margin-bottom: pxCalc(5px);
      .title{
        padding: pxCalc(16px) pxCalc(20px) pxCalc(13px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
        .icon{
          width: pxCalc(17px);
          display: inline-block;
          vertical-align: pxCalc(-4px);
          img{
            width: 100%;
          }
        }
        &-sn{
          color: #363b43;
        }
        .order-sn{
          color: #999999;
          font-size: pxCalc(13px);
        }
      }
    }
    .receive-list{
      padding-left: pxCalc(20px);
      background: #fff;
      margin-bottom: pxCalc(5px);
      .title{
        padding: pxCalc(16px) pxCalc(20px) pxCalc(13px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
        font-weight: bold;
        .btn{
          margin-top: pxCalc(-7px);
        }
        .txt{
          font-weight: normal;
        }
      }
      &-con{
        padding: 12px 0 18px;
        font-size: pxCalc(14px);
        color: #363b43;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        .item{
          line-height: 26px;
        }
      }
    }
  }
</style>
